<template>
	<view class="home">
		<u-navbar title="创建断面参数" :leftIconSize="24" bgColor="#f2f1f6" rightIcon="question-circle" :autoBack="true"
			:placeholder="true" safeAreaInsetTop>
			<view class="u-nav-slot" slot="right">
				<!-- <u-icon name="question-circle" color="#000" size="24"></u-icon> -->
			</view>
		</u-navbar>
		<view class="form-container">
			<form @submit="handleSubmit">
				<!-- 输入 -->
				<view class="form-box">
					<view class="" style="color: #1a89ff;text-align: center;font-size: 45rpx;">
						基本数据
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							测段名称：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.ceduanName" placeholder="请输入测段名称"
								placeholder-class="placeholder" />
							<view class="underline"></view>
						</view>
					</view>
					<!-- 					<view class="nameitem_box" style="padding: 20rpx 0;">
						<uni-data-picker placeholder="请选择所属渠道" popup-title="请选择所属渠道" :localdata="dataTree"
							v-model="formData.wcId" @change="changeFn" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed">
						</uni-data-picker>
					</view> -->
					<view class="nameitem_box">
						<view class="nameitem">
							经度：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.lot" placeholder="请输入经度"
								placeholder-class="placeholder" type="digit" />
							<view class="underline"></view>
						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							纬度：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.lat" placeholder="请输入纬度"
								placeholder-class="placeholder" type="digit" />
							<view class="underline"></view>
						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							断面形状：
						</view>
						<view class="input-item" style="padding: 30rpx 0; border-bottom: 1rpx solid #ddd;">
							<uni-data-checkbox v-model="formData.xingzhuang" mode="tag" :localdata="range"
								@change="changeFange"></uni-data-checkbox>
						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							渠底宽度：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.qudikuandu" placeholder="请输入渠底宽度"
								placeholder-class="placeholder" type="digit" />
							<view class="underline"></view>
						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							坡比：
						</view>
						<view class="input-item">
							<view class="">
								<input class="input-field" v-model="slopeRatio.l" placeholder="请输入坡比"
									placeholder-class="placeholder" type="digit" @input="blurinputFn">
								<view class="underline"></view>
							</view>
							<view class="" style="width: 100rpx;">
								:
							</view>
							<view class="">
								<input class="input-field" v-model="slopeRatio.r" placeholder="请输入坡比"
									placeholder-class="placeholder" type="digit" @input="blurinputFn">
								<view class="underline"></view>
							</view>

						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							左坡角度：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.startingEdge" placeholder="请输入左坡角度"
								placeholder-class="placeholder" type="digit">
							<view class="underline"></view>
						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							右坡角度：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.endEdge" placeholder="请输入右坡角度"
								placeholder-class="placeholder" type="digit" />
							<view class="underline"></view>
						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							左岸系数：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.raisedShore" placeholder="请输入左岸系数"
								placeholder-class="placeholder" type="digit" />
							<view class="underline"></view>
						</view>
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							右岸系数：
						</view>
						<view class="input-item">
							<input class="input-field" v-model="formData.endingShore" placeholder="请输入右岸系数"
								placeholder-class="placeholder" type="digit" />
							<view class="underline"></view>
						</view>
					</view>
				</view>
				<view class="form-box">
					<view class="" style="color: #1a89ff;text-align: center;font-size: 45rpx;">
						测控参数
					</view>
					<view class="nameitem_box">
						<view class="nameitem">
							选择测线：
						</view>
						<view class="input-item" style="padding: 30rpx 0;">
							<uni-data-select :clear="false" v-model="formData.cexiantiaoshu" :localdata="rangeselect"
								@change="changeselect"></uni-data-select>
						</view>
					</view>
					<view class="nameitem_box" style="margin-bottom: 20rpx;">
						<u-subsection :list="listSubsection" :current="curNow" @change="sectionChange"></u-subsection>
					</view>
					<view class="subsec-list" v-for="(i,index) in formData.configArr" :key="index">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120" v-if="i.type == curNow">
							<view id="demo1" class="scroll-view-item">
								<view class="scrol-het">
									<view class="scrol-het-i" v-for="(item,index) in titlist" :key="index">
										{{item}}
									</view>
								</view>
								<view class="scrol-item" v-for="(j,index) in i.modeConfigList" :key="index">
									<view class="scrol-item-dd" style="text-align: center;">
										{{j.id}}
									</view>
									<view class="scrol-item-i">
										<u--input v-model="j.cR" placeholder="填写内容" border="none"
											type="digit"></u--input>
									</view>
									<view class="scrol-item-i">
										<u--input v-model="j.zJ" placeholder="填写内容" border="none"
											type="digit"></u--input>
									</view>
									<view class="scrol-item-i">
										<u--input v-model="j.bC" placeholder="填写内容" border="none"
											type="digit"></u--input>
									</view>
									<view class="scrol-item-i">
										<u--input v-model="j.vM" placeholder="填写内容" border="none"
											type="digit"></u--input>
									</view>
								</view>
							</view>
							<view class="nameitem_box">
								<view class="nameitem">
									基准点位置：
								</view>
								<view class="input-item" style="padding: 30rpx 0;">
									<uni-data-select :clear="false" v-model="i.datumMark"
										:localdata="i.referencePointPosition"></uni-data-select>
								</view>
							</view>
							<view class="nameitem_box">
								<view class="nameitem">
									流速仪初始高度：
								</view>
								<view class="input-item">
									<input class="input-field" v-model="i.liusuyiHeight" placeholder="请输入右岸系数"
										placeholder-class="placeholder" type="digit" />
									<view class="underline"></view>
								</view>
							</view>
							<view class="nameitem_box">
								<view class="nameitem">
									流速仪到铅鱼底：
								</view>
								<view class="input-item">
									<input class="input-field" v-model="i.lsydqydData" placeholder="请输入右岸系数"
										placeholder-class="placeholder" type="digit" />
									<view class="underline"></view>
								</view>
							</view>
							<view class="" style="height:150rpx;">

							</view>
							<!-- <view id="demo2" class="scroll-view-item">B</view> -->
						</scroll-view>
					</view>
				</view>

				<u-button @click="submitFn" style="margin: 30rpx 0 100rpx 0;" throttleTime="1000" type="primary"
					shape="circle" text="提交"></u-button>
			</form>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="关闭" confirmText="同意" title="是否上传断面参数" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	// 引入外部 JS 文件
	import {
		handleTree
	} from '@/utils/ruoyi.js';
	export default {
		data() {
			return {
				slopeRatio: {
					l: 1,
					r: 2
				},
				dataTree: [], //所属渠道
				titlist: [
					'测线', '坐标', '走距', '基准点高', '系数'
				],
				listSubsection: ['手持杆', '轨道车', '索道车', '多普勒车'],
				curNow: 0,
				rangeselect: [{
						value: 1,
						text: "1条测线"
					},
					{
						value: 2,
						text: "2条测线"
					},
					{
						value: 3,
						text: "3条测线"
					},
					{
						value: 4,
						text: "4条测线"
					},
					{
						value: 5,
						text: "5条测线"
					},
					{
						value: 6,
						text: "6条测线"
					},
					{
						value: 7,
						text: "7条测线"
					},
					{
						value: 8,
						text: "8条测线"
					},
					{
						value: 9,
						text: "9条测线"
					},
				],
				duanMian: {},
				range: [{
						"value": 0,
						"text": "梯形"
					},
					{
						"value": 1,
						"text": "矩形",
					}
				],
				formData: {
					wcId: '', //所属渠道id
					ssId: '', //测站id
					type: '', //type为0是测段；type为1是计量点
					sfsId: '', //测段id
					fmpId: '', //计量点id
					ceduanName: '', //测段名称
					lot: '', //经度
					lat: '', //纬度
					xingzhuang: 0, //断面形状
					qudikuandu: 0, //渠底宽度
					startingEdge: 26.5651, //左坡角度
					endEdge: 26.5651, //右坡角度
					raisedShore: 0.9, //左岸系数
					endingShore: 0.9, //右岸系数
					cexiantiaoshu: 0, //测线条数
					configArr: [{
							type: 0,
							modeConfigList: [], //参数集合
							datumMark: '', //基准点位置：桥面，轨道面，铅鱼底，轨道面
							liusuyiHeight: '', //流速仪初始高度
							lsydqydData: '' //流速仪到铅鱼底
						},
						{
							type: 1,
							modeConfigList: [], //参数集合
							datumMark: '', //基准点位置：桥面，轨道面，铅鱼底，轨道面
							liusuyiHeight: '', //流速仪初始高度
							lsydqydData: '' //流速仪到铅鱼底
						},
						{
							type: 2,
							modeConfigList: [], //参数集合
							datumMark: '', //基准点位置：桥面，轨道面，铅鱼底，轨道面
							liusuyiHeight: '', //流速仪初始高度
							lsydqydData: '' //流速仪到铅鱼底
						},
						{
							type: 3,
							modeConfigList: [], //参数集合
							datumMark: '', //基准点位置：桥面，轨道面，铅鱼底，轨道面
							liusuyiHeight: '', //流速仪初始高度
							lsydqydData: '' //流速仪到铅鱼底
						}
					], //设备控制参数集合



				}
			}
		},
		onLoad(option) {
			let obj = option
			this.duanMian = obj
			// 树形
			// this.waterCanal() //渠道列表
			this.jingweidu() //经纬度
			this.formData.ceduanName = obj.name //测段名称
			this.formData.ssId = obj.ssId
			this.formData.type = obj.type
			this.formData.sfsId = obj.sfsId
			this.formData.fmpId = obj.fmpId
			this.formData.wcId = obj.wcId
			console.log('断面', obj);
		},
		methods: {
			// 提交
			submitFn() {
				this.$refs.alertDialog.open()
				console.log('表单数据:', this.formData)
			},
			dialogConfirm() {
				if (this.formData.cexiantiaoshu == '' || this.formData.cexiantiaosh == 0) {
					uni.showToast({
						title: '测线为空',
						icon: 'none'
					})
					return
				}
				if (this.formData.qudikuandu == '' || this.formData.qudikuandu == 0) {
					uni.showToast({
						title: '渠底宽度为空',
						icon: 'none'
					})
					return
				}
				this.handleSubmit()
				console.log('点击确认')
			},
			dialogClose() {
				console.log('点击关闭')
			},
			// 经纬度
			jingweidu() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.formData.lot = res.longitude
						this.formData.lat = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});

			},
			// 渠底形状
			changeFange() {

			},
			// 下拉
			changeselect() {
				let arr = this.formData.configArr
				let nub = this.formData.cexiantiaoshu * 1
				for (let t = 0; t < 4; t++) {
					console.log('测车数', t);
					// 手持杆
					if (arr[t].type == 0) {
						console.log('手持杆');
						for (let i = 0; i < nub; i++) {
							let obj = {
								id: i * 1 + 1,
								cR: '',
								zJ: '',
								bC: '',
								vM: '1'
							}
							arr[t].modeConfigList[i] = obj
						}
						arr[t].referencePointPosition = [{
								value: '桥面',
								text: "桥面"
							},
							{
								value: '轨道面',
								text: "轨道面"
							},
							{
								value: '铅鱼底',
								text: "铅鱼底"
							}
						] //基准点位置
						arr[t].datumMark = '桥面' //基准点
						arr[t].liusuyiHeight = '0' //流速仪初始高度
						arr[t].lsydqydData = '0.3' //流速仪到铅鱼底
					}
					// 轨道车
					if (arr[t].type == 1) {
						console.log('轨道车');
						for (let i = 0; i < nub; i++) {
							let obj = {
								id: i * 1 + 1,
								cR: '',
								zJ: '',
								bC: '',
								vM: '1'
							}
							arr[t].modeConfigList[i] = obj
						}
						arr[t].referencePointPosition = [{
								value: '桥面',
								text: "桥面"
							},
							{
								value: '轨道面',
								text: "轨道面"
							},
							{
								value: '铅鱼底',
								text: "铅鱼底"
							}
						] //基准点位置
						arr[t].datumMark = '桥面' //基准点
						arr[t].liusuyiHeight = '0' //流速仪初始高度
						arr[t].lsydqydData = '0.3' //流速仪到铅鱼底
					}
					// 索道车
					if (arr[t].type == 2) {
						console.log('索道车');
						for (let i = 0; i < nub; i++) {
							let obj = {
								id: i * 1 + 1,
								cR: '',
								zJ: '',
								bC: '',
								vM: '1'
							}
							arr[t].modeConfigList[i] = obj
						}
						arr[t].referencePointPosition = [{
								value: '桥面',
								text: "桥面"
							},
							{
								value: '轨道面',
								text: "轨道面"
							},
							{
								value: '铅鱼底',
								text: "铅鱼底"
							}
						] //基准点位置
						arr[t].datumMark = '桥面' //基准点
						arr[t].liusuyiHeight = '0' //流速仪初始高度
						arr[t].lsydqydData = '0.3' //流速仪到铅鱼底
					}
					// 多普勒
					if (arr[t].type == 3) {
						console.log('多普勒');
						for (let i = 0; i < nub; i++) {
							let obj = {
								id: i * 1 + 1,
								cR: '',
								zJ: '',
								bC: '',
								vM: '1'
							}
							arr[t].modeConfigList[i] = obj
						}
						arr[t].referencePointPosition = [{
								value: '桥面',
								text: "桥面"
							},
							{
								value: '轨道面',
								text: "轨道面"
							},
							{
								value: '铅鱼底',
								text: "铅鱼底"
							}
						] //基准点位置
						arr[t].datumMark = '桥面' //基准点
						arr[t].liusuyiHeight = '0' //流速仪初始高度
						arr[t].lsydqydData = '0.3' //流速仪到铅鱼底
					}
				}
				// let arr = this.formData.configArr[0].modeConfigList

				console.log('测线条数', this.formData.cexiantiaoshu);
				console.log('测线数组arr', arr);
				this.formData.configArr = arr
				// setTimeout(() => {
				// this.$forceUpdate();
				// }, 500)

			},
			// 测控切换
			sectionChange(index) {
				this.curNow = index;
				console.log('测车切换', index);
			},

			handleSubmit() {
				uni.$u.http.post('/device/gagingSectionParameters/addPhone', this.formData).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						uni.navigateBack({
							delta: 2
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			// 渠道列表
			waterCanal(id) {
				uni.$u.http.get('/device/WaterCanal/list').then(res => {
					console.log('渠道列表', res)
					let data = res.rows
					let arr = []
					if (res.code == 200) {
						arr = handleTree(data, data.id)
						this.dataTree = this.transformTreeData(arr)
						console.log(handleTree(data, data.id))
						console.log('this.dataTree', this.dataTree)
					}
				}).catch(err => {
					uni.showToast({
						title: '网络错误',
						duration: 1500
					});
					console.log('错误', err);
				})
			},
			// 选择部门
			changeFn(e) {
				console.log('选择完成时触发', e);
			},
			onpopupopened() {

				console.log('打开部门树');
			},
			onpopupclosed() {
				console.log('部门树关闭');
			},
			// 递归遍历转换
			transformTreeData(tree) {
				return tree.map(node => {
					const newNode = {
						value: node.id, // 将id改为value
						text: node.canalName // 将label改为text
					};

					// 复制其他属性
					for (const key in node) {
						if (key !== 'id' && key !== 'canalName' && key !== 'children') {
							newNode[key] = node[key];
						}
					}

					// 递归处理子节点
					if (node.children && node.children.length) {
						newNode.children = this.transformTreeData(node.children);
					}

					return newNode;
				});
			},
			// 纵坡坡比 
			blurinputFn(){
				let slope = (this.calculateAngle(this.slopeRatio.l,this.slopeRatio.r)).toFixed(4)
				console.log('坡比',slope);
				this.formData.startingEdge = slope
				this.formData.endEdge = slope
			},
			// 三角函数
			calculateAngle(opposite, adjacent) {
			  return Math.atan2(opposite, adjacent) * (180 / Math.PI);
			},
			// 返回
			retFn() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.form-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.form-box {
			padding: 20rpx;
			margin: 20rpx 0;
			border-radius: 20rpx;
			background-color: #ffffff;
		}

		// min-height: 100vh;
		// background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		.nameitem_box {
			display: flex;
			align-items: center;
			justify-content: center;
			// background-color: #333;

			.nameitem {
				width: 300rpx;
				font-size: 35rpx;
				color: #000000;
				// background-color: rgba(0, 0, 0, 0.21);
			}
		}

		.nameitem_box:focus-within .nameitem {
			/* 当.input-field获得焦点时，改变紧随其后的.target-element */
			color: #3b5fc1;
		}

		.subsec-list {
			// background-color: #9bef62;
			display: flex;
			align-items: center;
			justify-content: center;
			// padding: 20rpx 0;

			.scroll-view_H {
				white-space: nowrap;
				width: 650rpx;
				// background-color: #d8b219;
			}

			.scroll-view-item {
				display: inline-block;
				text-align: center;
				font-size: 36rpx;

				.scrol-het {
					display: flex;
					align-items: center;
					justify-content: center;

					.scrol-het-i {
						width: 132rpx;
						font-size: 30rpx;
						border-radius: 3rpx;
						border: 1rpx solid #5d5991;
						color: #ffffff;
						background-color: #5d5991;
					}

					:nth-child(1) {
						width: 100rpx;
					}
				}

				.scrol-item {
					display: flex;
					align-items: center;
					justify-content: center;

					.scrol-item-i {
						width: 132rpx;
						font-size: 30rpx;
						color: #ffffff;
						border: 1rpx solid #5d5991;
					}

					.scrol-item-dd {
						width: 100rpx;
						font-size: 30rpx;
						color: #ffffff;
						background-color: #5d5991;
						border: 1rpx solid #5d5991;
						// border-left: 1rpx solid #5d5991;
						// border-bottom: 1rpx solid #5d5991;
					}

					// :nth-child(1) {
					// 	width: 100rpx;
					// }
				}
			}
		}

		.input-item {
			display: flex;
			align-items: center;
			width: 100%;
			// margin-bottom: 20rpx;
			position: relative;

			.input-field {
				width: 100%;
				height: 80rpx;
				padding: 0 10rpx;
				font-size: 32rpx;
				color: #333;
				background: transparent;
				border: none;
				outline: none;
			}

			.placeholder {
				color: #aaa;
				font-size: 30rpx;
			}

			.underline {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2rpx;
				background: #ddd;
				transition: all 0.3s;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 0;
					height: 2rpx;
					background: #4a90e2;
					transition: all 0.3s;
				}
			}

			&:focus-within .underline::after {
				width: 100%;
			}
		}
	}
</style>
<style scoped lang="scss">
	.tophead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 20rpx 10rpx 20rpx;
		color: #000000;
		background-color: #f3f3f3;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5rpx 10rpx;
	}
</style>
<style>
	page {
		background-color: #f2f1f6;
	}
</style>